<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            
     
            var xhr=null; //globale au script

            function afficher(xmldocument,ordre) {
                id=xmldocument.getElementsByTagName("id");
                nom=xmldocument.getElementsByTagName("nom");
                pre=xmldocument.getElementsByTagName("prenom");
                adr=xmldocument.getElementsByTagName("adresse");
                cp=xmldocument.getElementsByTagName("cp");
                vil=xmldocument.getElementsByTagName("ville");
                dat=xmldocument.getElementsByTagName("dateEmbauche");
                var txtId=id[ordre].firstChild.nodeValue;
                var txtNom=nom[ordre].firstChild.nodeValue;
                var txtPrenom=pre[ordre].firstChild.nodeValue;
                var txtAdresse=adr[ordre].firstChild.nodeValue;
                var txtCp=cp[ordre].firstChild.nodeValue;
                var txtVille=vil[ordre].firstChild.nodeValue;
                var txtDateEmbauche=dat[ordre].firstChild.nodeValue;            
                document.getElementById("id").innerHTML=txtId;
                document.getElementById("nom").innerHTML=txtNom;
                document.getElementById("prenom").innerHTML=txtPrenom;
                document.getElementById("adresse").innerHTML=txtAdresse;
                document.getElementById("cp").innerHTML=txtCp;
                document.getElementById("ville").innerHTML=txtVille;
                document.getElementById("dateEmbauche").innerHTML=txtDateEmbauche;
            }

            function getMaison(ordre){
                if (window.XMLHttpRequest){
                    xhr=new XMLHttpRequest();
                } else if (window.ActiveXObject){
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }
                else {
                    alert("navigateur non comptatible Ajax...");
                }

                xhr.onreadystatechange=function(){
                    if (xhr.readyState==4 && xhr.status==200){
                        var xmldocument=xhr.responseXML;
                        afficher(xmldocument,ordre);
                    }
                }
                xhr.open("GET","idgsb.xml",true);
                xhr.send(null);
            }

        </script>
        <style type="text/css">
            body { font-family: Arial;}
            #div1 { border: 1px solid black;
                    font-size: 18px;
                    background-color: #33ccff;
                    padding: 5px;
                    width: 230px;
                    text-align: center;}
            #div2 {border: 1px solid black;
                   font-size: 12px;
                   padding: 5px;
                   width: 230px;}
            a {color: black;}
            p {font-size: 20px;}
            #liens {font-size: 14px;
                    margin-left:70px;}
            </style>
        </head>

        <body onload="getMaison(0)" >            
            <div id="div1">
            <span id="id"></span><br>
            <img src="TP1_logo-femme"><img src="TP1_logo-homme"/><br>
            <p><span id="nom"></span><span id="prenom"></span><br></p>
        </div>
        <div id="div2">
            Adresse: <span id="adresse"></span><br>
            Code Postal: <span id="cp"></span><br>
            Ville: <span id="ville"></span><br>
            Date d'embauche: <span id="dateEmbauche"></span><br>
        </div>
        <p id="liens">
            <a href="javascript:void(0)" onclick="getMaison(0)">1</a>
            <a href="javascript:void(1)" onclick="getMaison(1)">2</a>
        </p>
    </body>
</html>